<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?php echo $activity['title']; ?></title>
    <!--  微信js的引用配置  -->
    <?php include_once ROOT_PATH . '/public_tpl/common_header.php'; //微信js的引用配置  ?>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta equiv="Expires" content="0">

    <script>
        let screen_width = document.documentElement.clientWidth || document.body.clientWidth;
        let screen_height = document.documentElement.clientHeight || document.body.clientHeight;
        const designWidth = 750;
        const designHeight = 1334;
    </script>

    <meta id="eqMobileViewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
	<script src="<?php echo $this->SURL('/js/viewport.min.js') ?>"></script>
    
    <link rel="stylesheet" type="text/css" href="<?php echo $this->SURL('/css/animate.min.css')?>" />
    <link rel="stylesheet" type="text/css" href="<?php echo $this->SURL('/css/common.css')?>" />
    <link rel="stylesheet" type="text/css" href="<?php echo $this->SURL('/css/index.css')?>" />
    <script>
        var sysParam = {
            aid: <?php echo $activity['aid'];?>, //活动aid
            wxId: '<?php echo $userinfo['openid'];?>', //用户id
            baseUrl: '<?php echo $this->SURL(true); ?>',	//游戏图片路径
            isAttention: '<?php echo $isSubscribe;?>',//*用户是否已关注
            version: '<?php echo '?ver=' . $this->activity['aid'] . '_' . $this->activity['cache_key']?>',//资源版本
            musicUrl: "<?php echo $settings['musicUrl'];?>", //音频路径
            activity_desc: '<?php echo $settings['activityDesc']?>', //活动规则

            userImg: "<?php echo $userinfo['userImg']?>",
            nickname: "<?php echo addslashes($userinfo['nickname'])?>",

            isSharePage:`<?php echo $isSharePage?>`,//1-助力页，0-普通页
            isHelp:`<?php echo $isHelp?>`,//1助力成功2重复助力3助力次数已用完

            //...接口定义
            ajaxStartGameUrl: '<?php echo AU('game/startGame') . $_phone?>', //开始游戏
            //...
        }
        //系统后台配置的一些配置项参数
        let settings = <?php echo json_encode($settings)?>;
        
    </script>
     <script>
        //弹窗入场、出场效果定义，可设置一些动效如 x y autoAlpha scaleX scaleY rotation ... 
        let popFrom = { y: '-100%', autoAlpha: 0 };
        let popIn = { y: 0, autoAlpha: 1 };
        let popOut = { y: '100%', autoAlpha: 0 };
    </script>
</head>
<body>
<section v-cloak id="app">
    <!--页面尚未加载完成时的加载等待页面，一般情况下不改，除非客户要自定义加载页面-->
    <transition name="fade">
        <section class="pointer_events_none loading container dis_none" id="loading">
            <div class="loadingBox">
                <p class="flex align_center justify_center">
                    <img src="<?php echo empty($settings['loadingImg']) ? $this->DSURL('/images/logo.png') : $settings['loadingImg'] ?>">
                </p>
                <span class="l-1">i</span>
                <span class="l-2">-</span>
                <span class="l-3">l</span>
                <span class="l-4">z</span>
                <span class="l-5">.</span>
                <span class="l-6">c</span>
                <span class="l-7">n</span>
                <div class="loadingLine">
                    <div></div>
                </div>
            </div>
        </section>
    </transition>

    <section v-cloak class="body" :style="{'--body-width': width+'rem', '--body-height': height+'rem', '--app-scale': 1}">
        <!--定义一个名为index的页面(index最好在index.js的page中也定义一下)，可通过app.pageShow('index')显示出来-->
        <div class="page pages index">
            <!--
                说明：page、pages为必要值
                v-bg="'图片路径'" 把图片作为元素的背景给显示出来，用此指令，需要设置标签的宽高值，
                class="pages background_size_cover"，这里通过pages设置了宽高为100%，background-size通过background_size_cover设置为了cover，也可设置为background_size_contain
                后面这个bg为自定义的一个class,也可通过这个值在index.css自定义样式
            -->
            <span class="pages background_size_cover bg" v-bg="'<?php echo $this->SURL('/images/index/bg.png')?>'"></span>
            <!--
                说明:
                absolute 为对应 position: absolute
                ir 定义了此值，可自动获取到图片宽高并给元素设置好对应的width、height值
                btn_rule为自定义class，可随意定义任意个
                v-lefty 为对应的 left: 500rem; //1rem 等同于1px
                v-top   以1334的高度为基准，在不同高度下会自动计算成一个百分比数值设置到top的值中
                v-topy  为对应的 top: 500rem;
                effect  加了这个，点击的时候有音效出现
            -->
            <span class="absolute ir effect btn_rule" v-lefty="500" v-top="300" v-bg="<?php echo $this->SURL('/images/index/btn_rule.png')?>" @click="showRule"></span>
        </div>

        <!--定义一个名为rule的弹窗，可通过app.popShow('rule')显示出来-->
        <div class="pop rule">
            <!--
                说明：pop为表示是一个弹窗
                ce 设置一个有宽高且为绝对布局的元素在页面中水平垂直居中显示
                ir 同之前的ir说明
                pop_content 为必要值，可认为是一个容器，弹窗入入场出场动效会用到这个值
                lazy 设置图片在加载链接进入本页面的时候，不会加载图片，一般和 data-src属性一同使用
                data-src 定义元素的图片
                overflow_hidden: 同  overflow: hidden;
                fontsize_30: font-size: 30rem; //用法 fontsize_数字 数字的区间为14~100
                relative: position: relative;
                break_all: word-break: break-all;
                一些常用的类名:
                ml_数字: margin-left: 数字rem; // 数字区间 5~30
                mt_数字: margin-top:  数字rem; // 数字区间 5~30
                flex:   display: flex;
                flex_wrap:   flex-wrap: wrap;
                column: flex-direction: column;
                align_center: align-items: center;
                justify_center: justify-content: center
                更多见common.css定义(预定义了一些常用的样式，懒人不想在index.css中写过多的css可参考)
            -->
            <span class="ce lazy ir pop_content" data-src="<?php echo $this->SURL('/images/rule/bg.png')?>">
                <!--这句话上面的标签部分为弹窗声明的必要结构，这个容器块内为可自行写弹窗里的内容-->
                <span class="absolute overflow_hidden fontsize_30" id="rule">
                    <!--
                        这里定义了一个key，表示每次显示这个弹窗的时候，该标签里面的内容比如图片都会重新刷新重新获取，适应一些打开弹窗图片内容会改变的场景，比如获奖弹窗
                        js的data中必须有对应值才会生效
                    -->
                    <div class="relative break_all padding" :key="rule.key">
                        <div>{{'活动说明'.repeat(10)}}</div>
                        <span class="block lazy ir" data-src="images/index/bg.png"></span>
                    </div>
                </span>
                <span class="mCe ir effect lazy btn_close" data-src="<?php echo $this->SURL('/images/btn_close.png')?>" @click="close"></span>
            </span>
        </div>

        <transition-group name="fade">
            <!--通用tip提示-->
            <div key="fade" v-show="fAlert.show" class="fadeAlert" v-html="fAlert.text"></div>
            <!--通用加载等待，如请求接口时会出现以下加载框-->
            <div key="fade" class="pages flex column align_center justify_center loading_logo" v-show="ajaxLoading">
                <img class="logo_img" src="<?php echo $this->SURL('/images/logo.png') ?>" />
                <div class="relative mt_70 flex align_center justify_center">
                    <img class="wait_dot one" src="<?php echo $this->SURL('/images/dot.png') ?>" />
                    <img class="ml_25 wait_dot two" src="<?php echo $this->SURL('/images/dot.png') ?>" />
                    <img class="ml_25 wait_dot three" src="<?php echo $this->SURL('/images/dot.png') ?>" />
                </div>
            </div>
        </transition-group>
    </section>
</section>

<!--一些特定功能需要的JS文件-->
<script src="//res1.i-lz.cn/plugin/bscroll.min.js"></script>
<script src="//res1.i-lz.cn/plugin/vue.min.js"></script>
<script src="//res1.i-lz.cn/plugin/zepto.min.js"></script>
<script src="//res1.i-lz.cn/plugin/gsap.min.js"></script>
<script src="//res1.i-lz.cn/plugin/howler.min.js"></script>
<!--可自行加减其它js文件-->
<!--以下为直接加载common.js和index.js，未进行合并编绎，发布线上为避免兼容问题需要把common.js和index.js编绎成一个js文件，如main.min.js，再直接引用这个js文件-->
<script src="<?php echo $this->SURL('/js/common.js') ?>"></script>
<script src="<?php echo $this->SURL('/js/index.js') ?>"></script>


<!--以下为通用分享，一般不改它-->
<script>
    function getShareUrl() {
        return '<?php echo $shareUrl?>';
    }
    function getShareTitle() {
        return "<?php echo $settings['shareTitle'];?>";
    }
    function getShareContent() {
        return "<?php echo $settings['shareDesc']?>";
    }
    function getShareImage() {
        return "<?php echo $settings['shareIcon'] ?>";
    }
</script>

<script type="text/javascript">
    var title = `<?php echo $settings['shareTitle']?>`,
        desc = `<?php echo $settings['shareDesc']?>`,
        aid = <?php echo empty($activity['aid']) ? 0 : $activity['aid'];?>,
        img = '<?php echo $settings['shareIcon'];?>',
        link = getShareUrl();

    function init_wxjs() {
        wx.miniProgram.postMessage({
            data: {
                url: link, //分享链接
                img: img, //分享图标
                title: title, //分享标题
                type: 'share', // 消息类型: 'share': 分享
                path: link, // 分享卡片路径
                imageUrl: img // 分享卡片图片
            }
        });

        WX_STAT.init({
            hideToolbar: true,
            hideOptionMenu: false,
            networkType: "",
            title: '{title}',
            title_vars: {'{title}': 'title'},
            desc: '{desc}',
            desc_vars: {'{desc}': 'desc'},
            img: '{img}',
            img_vars: {'{img}': 'img'},
            link: '{link}',
            link_vars: {'{link}': 'link'}
        }, { // 分享取消
            cancel: function (resp) {
                //alert(resp);
            },
            // 分享失败
            fail: function (resp) {
                //alert(resp);
            },
            // 分享成功
            ok: function (resp) {
                // app.reqShare();
            }
        }, {
            aid:<?php echo $activity['aid'];?>,
            wxid: '<?php echo $userinfo['openid'];?>',
            fromType:<?php echo $this->fromType;?>,
            fromWxid: '<?php echo $this->fromwx;?>',
            attent: sysParam.isAttention
        });
    }
    init_wxjs();
</script>

</body>
</html>
